<template>
  <div>
    <el-form ref="formRef" label-width="60px" :rules="rules" :model="account">
      <el-form-item label="账号" prop="username">
        <el-input v-model="account.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="account.password" show-password></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { ElForm } from "element-plus";
import { defineComponent, reactive, ref } from "vue";
import { mapActions, useStore } from "vuex";
import { rules } from "../config/validata";
import storage from "@/utils/storage";
export default defineComponent({
  setup() {
    const store = useStore();
    const account = reactive({
      username: storage.getStorage("username") ?? "",
      password: storage.getStorage("password") ?? "",
    });
    const formRef = ref<InstanceType<typeof ElForm>>();
    const loginByAccount = (isKeepPaw: boolean) => {
      // 校验输入是否正确
      formRef.value?.validate((valid) => {
        console.log(valid);
        if (valid) {
          // 是否记住 密码 如果记住密码 就存入缓存
          if (isKeepPaw) {
            storage.setStorage("username", account.username);
            storage.setStorage("password", account.password);
          } else {
            // 如果没有点击保存密码 则清空缓存 那么下次再进入登录页面就读取不到缓存中的数据
            storage.removeStorage("username");
            storage.removeStorage("password");
          }
          store.dispatch("login/accountLoginAction", { ...account });
        }
      });
    };

    return { formRef, account, rules, loginByAccount };
  },
});
</script>

<style scoped>
div {
  list-style-type: disc;
}
</style>
